<template>
  <div>
    <div class="actionBar">
      <el-button
        type="primary"
        icon="el-icon-caret-top"
        size="mini"
        :class="{ agree: !isActive }"
        @click="giveALike"
      >赞同 {{ articleData.praise.length }}</el-button>
      <!-- <el-button
        type="primary"
        icon="el-icon-caret-bottom"
        size="mini"
        class="disagree"
      ></el-button>-->
      <span class="iconItem" @click="currCommentShow">
        <span class="iconfont">&#xe620;</span>
        {{ commentShowText }}
      </span>
      <span class="iconItem" @click="articleLike">
        <span class="iconfont" :class="{ like: isLike }">&#xe621;</span>
        收藏
      </span>
      <span class="iconItem" @click="articleAdopt" v-if="proData.userid._id == userInfo">
        <span class="iconfont" :class="{ like: articleData.adopt == 1 ? true : false }">&#xe615;</span>
        采纳
      </span>
      <span class="iconItem" @click="overhead" v-if="proData.userid._id == userInfo">
        <span class="iconfont" :class="{ like: articleData.topping == 1 ? true : false }">&#xe73a;</span>
      </span>
    </div>
    <transition>
      <div class="commentArea" v-if="commentShow">
        <div class="commentTitle">{{ commentData.length }} 条评论</div>
        <el-divider class="dividingLine"></el-divider>

        <!-- tableData.slice((currentPage-1)*pagesize,currentPage*pagesize) -->
        <div
          class="commentItem"
          v-for="(item, index) in commentData.slice(0, commentDataSize)"
          :key="index"
        >
          <div class="commentItemBox">
            <div class="comItemTop">
              <div class="comItemTopLeft" @click="toOtherPerson(item.userid)">
                <el-avatar size="small" :src="AvatarURL + item.userid.head_portrait"></el-avatar>
                <div class="comItemTopName">{{ item.userid.name }}</div>
              </div>
              <div
                class="comItemTopRight"
              >{{ new Date(Date.parse(item.release_time)).toLocaleString() }}</div>
            </div>

            <div class="comItemContent">{{ item.content }}</div>
            <div class="comItemBottom">
              <span class="comItemBottomIcon1">
                <span
                  class="iconfont"
                  :class="{ praise: isPraise(item.praise) }"
                  @click="getPraise(item, index)"
                >&#xe605;</span>
                {{ item.praise.length }}
              </span>
              <!-- <span class="comItemBottomIcon"
                ><span class="iconfont">&#xe6b8;</span> 踩</span
              >-->
              <span class="comItemBottomIcon" @click="showInput(`${index}`)">
                <span class="iconfont">&#xe600;</span>
                <span v-if="comeBalckInput == `${index}`">取消</span>回复
              </span>

              <span
                class="delectComm"
                v-if="item.userid._id == userInfo"
                @click="delectFirComm(item._id, index)"
              >删除评论</span>
            </div>
            <!-- //评论 -->
            <div class="commentInput" v-if="comeBalckInput == `${index}`">
              <el-input placeholder="请输入内容" clearable v-model="comeBalckCommentTetx"></el-input>
              <el-button
                type="primary"
                class="commentSend"
                @click="comeBalckComment(item._id, item.userid, index)"
              >发送</el-button>
            </div>
            <el-divider class="replyLine"></el-divider>

            <!-- //这是子评论 -->
            <div class="reply" v-for="(item2, index2) in item.secondComment" :key="index2">
              <div class="commentItemBox">
                <div class="comItemTop">
                  <div class="comItemTopLeft" @click="toOtherPerson(item2.userid)">
                    <el-avatar size="small" :src="AvatarURL + item2.userid.head_portrait"></el-avatar>
                    <div class="comItemTopName">{{ item2.userid.name }}</div>
                    <div class="replyId">
                      <span class="fromIcon">@</span>
                      <span class="fromName">{{ item2.replyid.name }}</span>
                    </div>
                  </div>
                  <div class="comItemTopRight">
                    {{
                    new Date(Date.parse(item2.release_time)).toLocaleString()
                    }}
                  </div>
                </div>

                <div class="comItemContent">{{ item2.content }}</div>
                <div class="comItemBottom">
                  <!-- <span class="comItemBottomIcon1"
                    ><span class="iconfont">&#xe605;</span> 3</span
                  >-->
                  <!-- <span class="comItemBottomIcon"
                    ><span class="iconfont">&#xe6b8;</span> 踩</span
                  >-->
                  <span class="comItemBottomIcon1" @click="showInput(`${index}-${index2}`)">
                    <span class="iconfont">&#xe600;</span>
                    <span v-if="comeBalckInput == `${index}-${index2}`">取消</span>回复
                  </span>
                  <span
                    class="delectComm"
                    v-if="item2.userid._id == userInfo"
                    @click="delectSecComm(item2._id, index, index2)"
                  >删除评论</span>
                </div>
                <!-- //评论 -->
                <div class="commentInput" v-if="comeBalckInput == `${index}-${index2}`">
                  <el-input placeholder="请输入内容" clearable v-model="comeBalckCommentTetx"></el-input>
                  <el-button
                    type="primary"
                    class="commentSend"
                    @click="comeBalckComment(item._id, item2.userid, index)"
                  >发送</el-button>
                </div>
                <el-divider class="replyLine"></el-divider>
              </div>
            </div>
          </div>
        </div>
        <div class="moreComment" v-if="commentDataSize < commentData.length">
          <span class="open" @click="moreComment">展开更多评论</span>
        </div>
        <el-divider class="dividingLine"></el-divider>
        <div class="commentInput">
          <el-input placeholder="请输入内容" clearable v-model="commentTetx"></el-input>
          <el-button type="primary" class="commentSend" @click="comment">发送</el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { defaultAvatarURL } from "../../../utils/global";
export default {
  props: [
    "articleData",
    "isLike",
    "commentData",
    "commentDataSize",
    "problemData"
  ],
  data() {
    return {
      userInfo: this.$store.getters.userInfo._id,
      AvatarURL: defaultAvatarURL,
      isActive: false,
      commentShow: true,
      commentShowText: "收起评论",
      commentTetx: "",
      comeBalckInput: "",
      comeBalckCommentTetx: "",
      proData: "" //问题
    };
  },
  watch: {
    articleData: {
      immediate: true,
      handler(val) {
        // console.log("articleData", val);
        this.isActive = val.praise.some(el => {
          return el == this.$store.getters.userInfo._id;
        });
        // console.log("this.isActive", this.isActive);
      },
      deep: true
    },
    problemData: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log("AAA", val, this.userInfo);

        this.proData = this.problemData;
      }
    }
  },
  methods: {
    //判断点赞
    isPraise(arr) {
      return arr.some(el => {
        return el == this.$store.getters.userInfo._id;
      });
    },
    currCommentShow() {
      this.commentShow = !this.commentShow;
      if (this.commentShow) {
        this.commentShowText = "收起评论";
      } else {
        this.commentShowText = "展开评论";
      }
    },
    //文章点赞
    giveALike() {
      this.$emit("giveALike", this.isActive);
    },
    //文章收藏
    articleLike() {
      this.$emit("articleLike");
    },
    comment() {
      this.$emit("comment", this.commentTetx);
    },
    //回复
    showInput(index) {
      this.comeBalckCommentTetx = "";
      if (this.comeBalckInput == index) {
        this.comeBalckInput = "";
      } else {
        this.comeBalckInput = index;
      }
    },
    //回复评论
    comeBalckComment(commentid, replyid, index) {
      //评论id,回复目标id,位置
      if (replyid._id == this.$store.getters.userInfo._id) {
        return this.$message({
          showClose: true,
          message: "不能回复自己的评论",
          type: "warning"
        });
      }
      // console.log(commentid, replyid, index, this.comeBalckCommentTetx);
      this.$emit(
        "comeBalckComment",
        commentid,
        replyid,
        index,
        this.comeBalckCommentTetx
      );
    },
    //点赞
    getPraise(item, index) {
      let isPra = this.isPraise(item.praise);
      this.$emit("getPraise", isPra, item._id, index);
    },
    //删除一级评论
    delectFirComm(item, index) {
      this.$emit("delectFirComm", item, index);
    },
    //删除二级评论
    delectSecComm(item, index, index2) {
      this.$emit("delectSecComm", item, index, index2);
    },
    //更多评论
    moreComment() {
      this.$emit("moreComment");
    },
    //顶置
    overhead() {
      this.$emit("overhead");
    },
    //采纳
    articleAdopt() {
      this.$emit("articleAdopt");
    },
    //其他用户主页
    toOtherPerson(userid) {
      console.log(userid, "sadasdasd");
      if (userid._id == this.$store.getters.userInfo._id) {
        this.$router.push({
          path: "/personalCenter",
          query: {}
        });
        return;
      }
      this.$router.push({
        path: "/otherPerson",
        query: {
          user_id: userid._id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
//收藏
.like {
  color: rgb(255, 174, 0);
}
//点赞
.praise {
  color: #0084ff;
}

.delectComm {
  float: right;
  color: #0084ff;
  font-size: 15px;
  cursor: pointer;
}

// 进入前和结束后的状态
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(80px);
}
// 进入和离开的动画时间段
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

.actionBar {
  margin-top: 30px;
  .agree {
    background: #e5f2ff;
    color: #0084ff;
    border: #e5f2ff 1px solid;
    &:hover {
      background: #d9edff;
    }
  }
  .disagree {
    background: #e5f2ff;
    color: #0084ff;
    border: #e5f2ff 1px solid;
    padding: 7px 7px;
    margin-left: 5px;
    &:hover {
      background: #d9edff;
    }
  }
  .iconItem {
    margin-left: 20px;
    color: #8590a6;
    line-height: 15px;
    font-size: 15px;
    &:hover {
      cursor: pointer;
    }
    .iconfont {
      font-size: 18px !important;
    }
  }
}
.commentArea {
  width: 98%;
  margin: 20px auto;
  border: 1px solid #efefef;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  .commentTitle {
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
  }
  .moreComment {
    margin: 0px 20px 10px 0;
    overflow: hidden;
    .open {
      float: right;
      color: #8590a6;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
      &:hover {
        color: #0084ff;
      }
    }
  }
  .dividingLine {
    margin: 0;
  }
  .commentItem {
    width: 100%;
    padding: 20px 20px 0px 20px;
    box-sizing: border-box;
    .commentItemBox {
      width: 100%;
      .replyLine {
        margin: 10px 0;
      }
      .comItemTop {
        display: flex;
        justify-content: space-between;
        line-height: 28px;
        .comItemTopLeft {
          display: flex;
          &:hover {
            cursor: pointer;
          }
          .comItemTopName {
            font-size: 15px;
            color: #525252;
            margin-left: 8px;
            font-weight: 550;
          }
          .replyId {
            margin-left: 10px;
            font-size: 15px;
            color: #525252;
            font-weight: 550;
            .fromIcon {
              color: #0084ff;
            }
            .fromName {
              margin-left: 2px;
            }
          }
        }
        .comItemTopRight {
          color: #8590a6;
          font-size: 15px;
        }
      }
      .comItemContent {
        margin-left: 30px;
        margin-top: 5px;
      }
      .comItemBottom {
        margin-left: 30px;
        margin-top: 8px;
        color: #8590a6;
        font-size: 15px;
        .comItemBottomIcon1:hover {
          cursor: pointer;
        }
        .iconfont {
          font-size: 14px !important;
          margin-right: 5px;
        }
        .comItemBottomIcon {
          margin-left: 28px;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .reply {
        margin-left: 30px;
      }
    }
  }
  .commentInput {
    padding: 10px;
    display: flex;
    .commentSend {
      margin-left: 20px;
      background: #1d2f70;
      &:hover {
        background: rgb(53, 89, 180);
      }
    }
  }
}
</style>
